<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>边框阴影</title>

		<style>

			.items{
				display: -webkit-flex;
				display: block;
				width: 750px;
				height: auto;
				background-color: lightgrey;
			}

			.item{
				/*display: block;*/
				float: left;
				/*clear: both;*/
				background-color: white;
				width: 160px;
				height: 200px;
				margin: 10px;
				box-shadow: 0px 0px 2px 0px red;
			}

			.item:nth-of-type(-n+4){
				box-shadow: 0px 0px 2px 0px blue;
			}
			img{
				width: 160px;
				height: 160px;
			}

			/*div{*/
				/*width: 200px;*/
				/*height: 200px;*/
				/*background-color: yellow;*/
				/*margin: 100px auto;*/
				/*box-shadow: 0px 0px 16px 0px red inset;*/
			/*}*/

		</style>
	</head>
	<body>

	<!--
	文本阴影
	text-shadow: h-shadow v-shadow blur color;
	h-shadow	必需。水平阴影的位置。允许负值。
	v-shadow	必需。垂直阴影的位置。允许负值。
	blur		可选。模糊的距离。
	color		可选。阴影的颜色。参阅 CSS 颜色值。
	-->

	<!--
	边框阴影:
	box-shadow: h-shadow v-shadow blur spread color inset;

	h-shadow	必需的。水平阴影的位置。允许负值
	v-shadow	必需的。垂直阴影的位置。允许负值
	blur		可选。模糊距离
	spread		可选。阴影的大小
	color		可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
	inset		可选。从外层的阴影（开始时）改变阴影内侧阴影
	-->
	<div class="items">
		<div class="item">
			<img src="../img/caseUI/1.jpg">
		</div>
		<div class="item">
			<img src="../img/caseUI/2.jpg">
		</div>
		<div class="item">
			<img src="../img/caseUI/3.jpg">
		</div>
		<div class="item">
			<img src="../img/caseUI/4.jpg">
		</div>
		<div class="item">
			<img src="../img/caseUI/5.jpg">
		</div>

	</div>

	</body>
</html>
